
$(document).ready(function(){
    $.fn.extend({
        resize: function(width, height){
            var imgWidth = this.width();
            var imgHeight = this.height();
            var marginWidth = 0;
            var marginHeight = 0;
            //alert("width: " + imgWidth + " hieght: " + imgHeight);
            
            var perfectWidth = 0;
            var perfectHeight = 0;
            
            var imgRate = imgHeight / imgWidth;
            
            
            var rate = height / width;
            if (imgRate > rate) {
                perfectHeight = height;
                perfectWidth = perfectHeight / imgRate;
                marginWidth = width - perfectWidth;
            }
            else {
                if (imgRate < rate) {
                    perfectWidth = width;
                    perfectHeight = perfectWidth * imgRate;
                    marginWidth = height = perfectHeight;
                }
                else {
                    if (imgRate == rate) {
                        perfectHeight = height;
                        perfectWidth = width;
                    }
                }
            }
            
            this.width(perfectWidth);
            this.height(perfectHeight);
            this.css("padding", marginHeight/2 + "px " + marginWidth/2 + "px");
        }
    });
    $("img").click(function(){
        $(this).resize(100, 100);
    });
});

